<template>
  <div id="operate_comment">
    <div id="system_role">
      <!--顶部搜索框内容开始-->
      <div class="role_seek">
        <el-input
          class="role_input"
          placeholder="评论ID"
          v-model="forms.id"
          clearable
          @change="seek"
        ></el-input>
        <el-input
          class="role_input"
          placeholder="用户姓名"
          v-model="forms.userName"
          clearable
          @change="seek"
        ></el-input>
        <el-input
          class="role_input"
          placeholder="商品名称"
          v-model="forms.spuName"
          clearable
          @change="seek"
        ></el-input>

        <el-input
          class="role_input"
          placeholder="评论内容"
          v-model="forms.content"
          clearable
          @change="seek"
        ></el-input>

        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="seek"
          v-power="'operation:appraise:query'"
          >查找</el-button
        >
      </div>
      <!--顶部搜索框内容结束-->

      <!--底部列表内容部分-->
      <template>
        <el-table
          border
          :data="tableData"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column
            prop="id"
            label="评论编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="content"
            label="评论内容"
            align="center"
            width="300px"
          ></el-table-column>
          <el-table-column prop="score" label="评论分数" align="center">
          </el-table-column>
          <el-table-column prop="userId" label="用户ID" align="center">
          </el-table-column>
          <el-table-column prop="userNickName" label="用户昵称" align="center">
          </el-table-column>
          <el-table-column prop="orderId" label="订单ID" align="center">
          </el-table-column>
          <el-table-column prop="orderId" label="商品ID" align="center">
          </el-table-column>
          <el-table-column prop="spuTitle" label="商品名称" align="center">
          </el-table-column>
          <el-table-column prop="gmtCreate" label="评论时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.gmtCreate | filterTimes() }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="200px"
          >
            <template slot-scope="scope">
              <el-button
                class="button_remove"
                size="mini"
                type="danger"
                v-power="'operation:appraise:delete'"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--底部列表内容部分结束-->

      <!--底部分页开始-->
      <div class="block">
        <Paging :forms="forms" :gain="gain"></Paging>
      </div>
      <!--底部分页结束-->
    </div>
  </div>
</template>

<script>
import Paging from "../../components/Paging.vue"; //自定义组件
import { Times } from "../../util/times"; //时间戳
import Comment from "@/api/operate/Comment"; //封装js
export default {
  data() {
    return {
      tableData: [],
      //分页
      forms: {
        limit: 10,
        total: 5, //分页——-共几条
        pageNo: 1, //页码
        userName: "", //用户姓名
        id: "", //评论id
        spuName: "", //商品名字
        orderId: "", //订单ID
        score: "", //评论分数
        content: "" //评论内容
      },
      form: {
        id: "" //用于删除传参
      }
    };
  },
  //注册组件
  components: {
    Paging
  },
  created() {
    this.gain();
  },
  filters: {
    //时间过滤器
    filterTimes(data) {
      if (new Date().getTime() - data <= 86400000) {
        //判断现在时间减去传下来的时间是否小于或等于一天的时间(毫秒数)
        return new Date().getHours - new Date(data).getHours + "小时前";
      } else {
        return data ? Times(data) : "无";
      }
    }
  },
  methods: {
    //获取列表数据内容
    gain() {
      var _this = this;
      Comment.gain(_this.forms)
        .then(res => {
          _this.tableData = res.data.data.items; //将接口列表内容赋值给列表数组
          _this.forms.total = res.data.data.total; //分页————条数
          _this.forms.limit = res.data.data.pageSize; //页码长度
          _this.forms.pageNo = res.data.data.pageNo; //页码
        })
        .catch(err => {
          return err;
        });
    },
    //搜索信息
    seek() {
      this.forms.pageNo = 1; //在最后一页搜索时回到第一页
      this.gain();
    },
    //点击删除当前内容
    handleDelete(row) {
      this.form.id = row.id; //当前删除的id
      this.$confirm("此操作将永久删除该评论" + row.id + "，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //确定删除的话
          this.cancel();
        })
        .catch(() => {
          this.Prosperity.Messages("已取消删除");
        });
    },
    //删除内容接口
    cancel() {
      var _this = this;
      Comment.cancel(_this.form)
        .then(res => {
          if (res.data.errmsg == "成功") {
            _this.gain(); //重新渲染
            this.Prosperity.Messages("删除评论成功", "success");
          } else {
            this.Prosperity.Messages(res.data.data, "error");
          }
        })
        .catch(err => {
          return err;
        });
    }
  }
};
</script>

<style scoped="scoped">
/*最大父盒子开始*/
#system_role {
  padding: 20px;
}
/*最大父盒子结束*/

/*顶部按钮开始*/
.el-input {
  width: 200px;
  margin-right: 5px;
}
.role_seek > .el-button--primary {
  line-height: 1px;
  font-size: 14px;
  border: 1px solid #409eff !important;
  background: #409eff !important;
  color: #fff;
  vertical-align: middle;
  padding: 12px 20px;
  margin-left: 5px;
}
/*顶部按钮结束*/

/*底部列表内容*/
.el-table {
  margin-top: 23px;
}
.cell {
  text-align: center;
  font-size: 12px;
  padding: 0px 10px;
}
.el-table__row > td {
  padding: 8px 0px;
}
.button_redact {
  background: #409eff !important;
  color: #fff !important;
  border: 1px solid #409eff;
} /*编辑内容按钮*/
.button_redact:hover {
  background: #66b1ff !important;
  border: 1px solid #66b1ff;
}
.button_remove {
  background: #f56c6c !important;
  color: #fff !important;
  border: #f56c6c 1px solid;
}
.button_remove:hover {
  background: #f78989 !important;
  border: 1px solid #f78989;
}
.el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden;
}
.el-table {
  font-size: 12px;
}
/*底部列表内容*/

/*底部分页*/
.block {
  margin: 55px 0px;
}
.pagination .el-input__suffix {
  left: 70px !important;
}
/*底部分页结束*/
.el-form-item__label {
  text-align: left;
  margin-left: 50px;
  width: 85px !important;
}
.el-input__inner {
  text-indent: 5px;
  width: 100px;
}
.el-form {
  margin-left: 65px !important;
}
.el-form-item__label > .el-form-item__content > .el-form-item__error {
  padding: 50px !important;
  width: 100%;
}
</style>
